﻿<!DOCTYPE HTML>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<div class="card">
    <div class="card-header">
        <div class="col-xs-6">
            <h2>接口分类列表</h2>
        </div>
        <div class="col-xs-6">
            <button class="btn btn-primary" id="addCategoryBtn">新建</button>
        </div>
    </div>
    <table id="data-table-interfaceCategory" class="table table-striped table-vmiddle">
        <thead>
        <tr>
            <th data-column-id="interfaceCategoryId" data-formatter="interfaceCategoryId" data-type="numeric">ID</th>
            <th data-column-id="categoryName" data-formatter="categoryName">分类名称</th>
            <th data-column-id="isValid" data-formatter="isValid">状态</th>
            <th data-column-id="createTime" data-formatter="createTime">创建时间</th>
            <th data-column-id="categoryDesc" data-formatter="categoryDesc">分类描述</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</html>
<!-- Modal -->
<div class="modal fade" id="addInterfaceCategoryModel" tabindex="-1" role="dialog" aria-labelledby="addInterfaceCategoryModelLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="addInterfaceCategoryModelLabel">
                    添加分类信息
                </h4>
            </div>
            <div class="modal-body" id="addInterfaceCategoryModelContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="$('#add_category_form').submit();">
                    保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="modifyInterfaceCategoryModel" tabindex="-1" role="dialog" aria-labelledby="modifyInterfaceCategoryModelLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="modifyInterfaceCategoryModelLabel">
                    编辑分类信息
                </h4>
            </div>
            <div class="modal-body" id="modifyInterfaceCategoryModelContent">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="$('#modify_category_form').submit();">
                    保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    $(function () {
        var grid = $("#data-table-interfaceCategory").bootgrid({
            ajax: true,
            url: "/category/queryCategoryList",
            labels: {
                noResults: "无任何数据"
            },
            post: function () {
                /* 自定义参数 */
                return {
                    id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
                };
            },
            formatters: {
                "isValid": function (column, row) {
                    var html;
                    if (row.isValid == 1) {
                        html = '<span style="color: #2196F3;">启用</span>';
                    } else {
                        html = '<span style="color: #F44336;">禁用</span>';
                    }
                    return html;
                },
                "commands": function (column, row) {
                    return '<button type="button" class="btn btn-icon command-edit waves-effect waves-circle" data-row-id="' + row.interfaceCategoryId
                        + '"><span class="zmdi zmdi-edit"></span></button> ' +
                        '<button type="button" class="btn btn-icon command-delete waves-effect waves-circle" data-row-id="' + row.interfaceCategoryId
                        + '"><span class="zmdi zmdi-delete"></span></button>';
                }
            }
        }).on("loaded.rs.jquery.bootgrid", function () {
            /* 绑定编辑和删除操作 */
            grid.find(".command-edit").on("click", function (e) {
                $("#modifyInterfaceCategoryModelContent").load("/category/toModifyCategory?categoryId="+$(this).data("row-id"));
                $("#modifyInterfaceCategoryModel").modal("show");
            }).end().find(".command-delete").on("click", function (e) {
                deleteCategory($(this).data("row-id"));
            });
        });

        $("#addCategoryBtn").on("click",function(){
            $("#addInterfaceCategoryModelContent").load("/category/toAddCategroy");
            $("#addInterfaceCategoryModel").modal("show");
        })
    })

    function deleteCategory(categoryId){
        if(confirm("确定删除吗？")){
            var url = "/category/deleteCategory?categoryId="+categoryId;
            $.get(url,function(data){
                alert(data.reason);
                if(data.ok){
                    $("#data-table-interfaceCategory").bootgrid("reload");
                }
            })
        }
    }
</script>